<template>
  <div class="lineLine-box">
    <ul class="lineLine">
      <li
        v-for="(item, index) of dataList"
        :key="index"
      >
        <h3 class="locationTitle iconfont">{{item.title}}</h3>
        <ul>
          <li>
            <el-line
              :xData="item.data[0].xData"
              :data="item.data[0].value"
              :yName="item.data[0].title"
              :grid="grid"
              :yPadding="yPadding"
              :color="item.data[0].color"
            >
            </el-line>
          </li>
          <li>
            <el-line
              :xData="item.data[1].xData"
              :data="item.data[1].value"
              :yName="item.data[1].title"
              :grid="grid"
              :yPadding="yPadding"
              :color="item.data[1].color"
            >
            </el-line>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import ElLine from '@/common/echarts/Line'
export default {
  name: 'LineLine',
  components: {
    ElLine
  },
  props: {
    'dataList': {
      type: Array,
      default () {
        return [
          {
            title: '榆林市',
            data:
            [
              {
                title: '平均身高（cm）',
                color: ['#53e9ee'],
                xData: ['2月', '3月', '4月', '5月', '6月', '7月'],
                value: [{
                  name: '',
                  value: [80, 100, 90, 48, 45, 95, 49, 75, 67, 46]
                }]
              },
              {
                title: '平均体重（kg）',
                color: ['#ffe98f'],
                xData: ['2月', '3月', '4月', '5月', '6月', '7月'],
                value: [{
                  name: '',
                  value: [80, 100, 90, 48, 45, 95, 49, 75, 67, 46]
                }]
              }
            ]
          },
          {
            title: '商洛市',
            data:
            [
              {
                title: '平均身高',
                color: ['#53e9ee'],
                xData: ['2月', '3月', '4月', '5月', '6月', '7月'],
                value: [{
                  name: '',
                  value: [80, 100, 90, 48, 45, 95, 49, 75, 67, 46]
                }]
              },
              {
                title: '平均体重',
                color: ['#ffe98f'],
                xData: ['2月', '3月', '4月', '5月', '6月', '7月'],
                value: [{
                  name: '',
                  value: [80, 100, 90, 48, 45, 95, 49, 75, 67, 46]
                }]
              }
            ]
          }
        ]
      }
    }
  },
  data () {
    return {
      grid: {
        top: '20%',
        left: '0%',
        right: '10%',
        bottom: '0%',
        containLabel: true
      },
      yPadding: [0, 0, 0, 30]
    }
  }
}
</script>

<style lang="stylus" scoped>
.lineLine-box
  width: 100%
  .lineLine
    width: 100%
    li
      width: 100%
      ul
        width: 100%
        overflow: hidden
        li
          height: 160px
          width: 50%
          float: left
          margin-top: 10px
</style>
